/**
 * 经过打包后我们的 js , css等文件是动态生成的，从而导致每次都需要更新 Service Worker的 Cache 版本池。 
 * Service Worker 缓存空间限制，Chrome 没有限制大小， Safari 限制50MB
当第一次访问页面，资源的请求是早于 Service Worker 的，所以静态资源是无法缓存的；只有当 Service Worker 安装完毕，用户第二次访问页面的时候，这些资源才会被缓存起来；所以 Service Worker 真正生效是在第三次访问
 */
const cacheStorageKey = 'minimal-pwa-1';
const cacheList = ['/', 'index.html', 'main.css', 'e.png'];

self.addEventListener('install', (e) => {
  // ... 安装完成
  // 确保 Service Worker 不会在 waitUntil() 里面的代码执行完毕之前安装完成

  e.waitUntil(
    caches
      .open(cacheStorageKey) //创建了叫做 cacheStorageKey 的新缓存
      .then((cache) => cache.addAll(cacheList)) // 相对于 sw.js 的路径 缓存cacheList中的文件
      .then(() => self.skipWaiting())
  );
});

self.addEventListener('fetch', function (e) {
  e.respondWith(
    // 从缓存中读取 respondWith表示拦截请求并返回自定义的响应
    caches.match(e.request).then(async (response) => {
      if (response != null) {
        return response;
      }
      // 如果缓存中没有，就从网络中请求
      //return fetch(e.request.url);
      const responseFromServer = await fetch(e.request);
      const cache = await caches.open(cacheStorageKey);
      // 将请求到的资源添加到缓存中
      cache.put(e.request, responseFromServer.clone());
      return responseFromServer;
    })
  );
});

self.addEventListener('activate', function (e) {
  // ... 激活完成
  //  当你的Service Worker js文件有更新，需要删除旧的缓存，同时启动新的 Service Worker cache，代码如下：
  e.waitUntil(
    Promise.all(
      caches.keys().then((cacheNames) => {
        return cacheNames.map((name) => {
          if (name !== cacheStorageKey) {
            return caches.delete(name);
          }
        });
      })
    ).then(() => {
      return self.clients.claim();
    })
  );
});
